<template>
  <view class="coupon-dialog flexc">
    <image
      class="coupon-img"
      src="@/subpages/static/get_coupon_img.png"
      mode="heightFix"
    ></image>
    <view class="coupon-bg-container">
      <image
        class="coupon-bg"
        src="@/subpages/static/get_coupon_bg.png"
        mode="widthFix"
      ></image>
      <view class="info-container flexc align-center">
        <view> 恭喜你 </view>
        <view class="info-desc"> 即将领取到一张优惠券 </view>
        <view class="ask">?</view>
        <view class="primary-button button" @click="emits('confirm')">点击领取</view>
      </view>
    </view>
    <image
      class="close-dialog"
      src="@/static/close_dialog.png"
      @click="emits('cancel')"
    ></image>
  </view>
</template>
<script setup>
const emits = defineEmits(["cancel", "confirm"]);
</script>
<style lang="scss">
.coupon-dialog {
  width: calc(100vw - 60rpx);
  .coupon-img {
    height: 350rpx;
    align-self: center;
    z-index: 1;
  }
  .coupon-bg-container {
    width: 100%;
    margin-top: -180rpx;
    position: relative;
    .coupon-bg {
      width: 100%;
    }
    .info-container {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      height: 100%;
      width: 100%;
      text-align: center;
      color: black;
      font-size: 60rpx;
      justify-content: flex-end;
      padding-bottom: 20rpx;
      box-sizing: border-box;
      .info-desc {
        font-size: 40rpx;
        color: rgba(255, 177, 1, 1);
      }
      .ask {
        font-size: 130rpx;
        color: rgba(253, 93, 1, 1);
        margin-top: 10rpx;
      }
      .button {
        background-color: rgba(255, 177, 1, 1) !important;
        align-self: normal;
        margin: 10rpx 32rpx 32rpx;
      }
    }
  }
  .close-dialog {
    width: 80rpx;
    height: 80rpx;
    align-self: center;
    margin-top: 40rpx;
  }
}
</style>